Any update on this? I want to import esm file in tailwind.config.js, but import statement return a promise, and tailwind.config.js seems not support return a function.

const plugin = require('tailwindcss/plugin');
const erdaTheme = import('./app/erda-theme.mjs');

modules.exports = {
  theme: { colors: erdaTheme } // is a promise instead of plain object
}

I think this may help if i can change the config file to esm type.

Any update on this?

I would really appreciate this feature!

Hey! So this has been open as a draft for a while now and I'm looking through issues. Looking into this we'd need to make a handful things async (some of which you have done) but this will definitely break intellisense with the way it's currently implemented. Many things there are assumed to be entirely synchronous. We definitely would love to have ESM support (I would love it personally too) for config files but it can't happen in v3.1. The other thing is that getModuleDependencies would need to be able to track ESM imports/exports in addition to requires. This is further complicated by the fact that, in ESM, you can create your own require function using createRequire. Detecting config changes is simple enough but tracking ESM dependencies could be significantly more involved. I'm not sure if this will be something we want to look at in v3.2 or for a v4.0 in the future.

Given that this would be a non-trivial time sink for Tailwind CSS, Intellisense, and possibly the prettier plugin, we would need to be sure we could support and update all of those at the same time. Neither I nor the rest of the team have the time to do this properly right now so I'm gonna close this. I really appreciate your work on this and will absolutely reference and credit it in the future when we have a chance to think through this and implement it in a way that we feel comfortable with shipping.

Really do appreciate your time on this though! ✨

Given that this would be a non-trivial time sink for Tailwind CSS, Intellisense, and possibly the prettier plugin

ESM support is more important than intellisense or the prettier plugin. Not having ESM means I won't be using tailwind for my next project. I often don't have intellisense (TM), due to the sea of cloud IDE's with their own flavor of it, so that's not an issue. Anthony Fu has even renounced prettier in favor of other workflows for similar reasons reasons.

What I'm saying is, ESM should have been supported Q4 2021, at the latest, and not having it is a really bad look, so it should be priority number one. Off the top of my head, node-fetch, test runner, speed, top-level async and avoiding configuration nightmares are well worth drooping tailwind for UnoCSS or bare-metal PostCSS, depending on whether you can use Vite.

theres a workaround by using this code for your postcss config:

import autoprefixer from 'autoprefixer'
import tailwind from 'tailwindcss'
import tailwindConfig from './tailwind.config.js'

export default {
    plugins: [tailwind(tailwindConfig), autoprefixer],
}

then your tailwind config file can use esm e.g.:

export default {
    content: ['./src/components/**/*.jsx'],
    theme: {
        extend: {},
    },
    plugins: [],
}

credit to @muuvmuuv for this